<template>
	<div class="allcontainer" v-loading="loading">
		<div class="h2">我参加的活动</div>
		<div class="bg-white">
			<a-tabs :defaultActiveKey="progress" @change="callback">
				<a-tab-pane key="1" tab="进行中">
				</a-tab-pane>
				<a-tab-pane key="2" tab="待完结" force-render>
				</a-tab-pane>
				<a-tab-pane key="3" tab="已完结">
				</a-tab-pane>
			</a-tabs>
			<div class="table">
				<el-table stripe ref="singleTable" :data="MActivityList" highlight-current-row style="width: 100%">
					<el-table-column type="index" label="序号" width="60" fixed="left" align="center"></el-table-column>
					<el-table-column prop="No" label="编号" width="120" fixed="left" align="center"></el-table-column>
					<el-table-column prop="Title" label="名称" min-width="140" fixed="left" show-overflow-tooltip>
						<template slot-scope="scope">
							<div @click="seedetail(scope.row)">{{ scope.row.Title || scope.row.TypeItemName }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="ClassName" label="学生组织/班级" min-width="100" align="center">
						<template slot-scope="scope">
							{{ scope.row.ClassName || scope.row.ClubName }}
						</template>
					</el-table-column>
					<el-table-column prop="TypeName" label="类型" min-width="120" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="StartTime" label="活动时间" min-width="160" align="center">
						<template slot-scope="scope">
							<div>始：{{ scope.row.StartTime }}</div>
							<div>终：{{ scope.row.EndTime }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="MemberNum" label="成员数" width="80" align="right"></el-table-column>
					<el-table-column prop="IsEnable" label="操作" width="165">
						<template slot-scope="scope">
							<div class="user-btn user-btn-auto">
								<span class="signin" @click="UserActivitySignRecord(scope.row)">签到记录</span>
								<span class="file" @click="AddFile(scope.row)">附件</span>
								<span class="member" style="margin-right: 10px;"  v-if="scope.row.IsNeedActivityJob" @click="goNav(scope.row)">我的作业</span>
								<span class="reply" v-if="scope.row.IsNeedActivityJob" @click="UserActivityJob(scope.row)">作业</span>
								<span class="applicant" @click="UserEvaluationItemFun(scope.row,'2')">活动评价</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pagination.currentPage" :page-sizes="pagination.pageSizeOptions"
				:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"></el-pagination>
			
		</div>
		<addActivity v-if="showModal" @closeFun="closeFun()"></addActivity>
		<detailActivity v-if="detailshowModal" :text="text" @closeFun="closeFun()"></detailActivity>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		GetJoinClubList,
		GetUserManagClubList,
		GetJoinActivityPageList,
		DoGetTeacherExamPageList,
		DoGetTeacherAlreadyExamPageList
	} from '@/api/follow';
	import addActivity from './addActivity.vue';
	import detailActivity from './detailActivity.vue';
	import Cache from '@/utils/cache';
	export default {
		components: {
			addActivity,
			detailActivity
		},
		data() {
			return {
				requestUrl: this.global.requestUrl,
				MActivityList: [],
				avatar: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=757545797,2214471709&fm=11&gp=0.jpg',
				approvalList: '',
				showModal: false,
				loading: false,
				detailshowModal: false,
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				progress: this.$route.query.progress || 1
			};
		},
		created() {
			// this.progress = this.$route.query.progress?this.$route.query.progress:1
			this.getList();
		},
		computed: {},
		methods: {
			UserEvaluationItemFun(text,state) {
				// let state=text.ChargeUserNo== Cache.get('myInfo').UserNo?'1':'2'
				this.$router.push({
					// name: 'NoticeJoin',
					name: "UserEvaluationItem",
					query: {
						Name: text.Name,
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						state:state
					}
				});
			},
			callback(key) {
				this.pagination.currentPage = 1
				this.progress = key
				this.getList()
			},
			UserActivitySignRecord(text) {
				this.$router.push({
					name: 'ActivitySignRecord',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo
					}
				});
			},
			AddFile(text) {
				this.$router.push({
					name: 'Enclosure',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						State: text.State
					}
				});
			},
			UserActivityJob(text) {
				this.$router.push({
					name: 'UserActivityJob',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						source:2,
						State: text.State
					}
				});
			},
			goNav(text){
				this.$router.push({
					name: 'ActivityJobResultMy',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						source:'2'
					}
				});
			},
			seedetail(t) {
				this.text = t;
				this.detailshowModal = !this.detailshowModal;
			},
			morejoinclub() {
				this.$router.push({
					name: 'MoreJoinClub'
				});
			},
			UserActivitySign(text) {
				this.$router.push({
					name: 'ActivitySignRecord',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo
					}
				});
			},
			ActivityApplyList(text) {
				this.$router.push({
					name: 'UserActivityApplyList',
					query: {
						ID: text.ID
					}
				});
			},
			JoinActivity(text) {
				this.$router.push({
					name: 'UserJoinActivity',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo
					}
				});
			},
			activitymembermanage(text) {
				this.$router.push({
					name: 'ActivityMembermanage',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChargeUserNo,
						ClubID: text.ClubID
					}
				});
			},
			membermanage(text) {
				this.$router.push({
					name: 'Membermanage',
					query: {
						ID: text.ID,
						ChairmanNo: text.ChairmanNo
					}
				});
			},
			applicant(text) {
				this.$router.push({
					name: 'ApplyList',
					query: {
						ID: text.ID
					}
				});
			},
			activitymanage(text) {
				this.$router.push({
					name: 'UserActivitymanage',
					query: {
						ID: text.ID
					}
				});
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList() {
				let data = {};
				this.loading = true;
				data.pageIndex = this.pagination.currentPage;
				data.pageSize = this.pagination.pageSize;
				data.progress = this.progress
				let res2 = await GetJoinActivityPageList(data);
				this.MActivityList = res2.data.data;
				const pagination = {
					...this.pagination
				};
				pagination.total = res2.data.pageInfo.TotalItemCount;
				this.pagination = pagination;
				this.loading = false;
			},
			closeFun(index) {
				this.showModal = false;
				this.detailshowModal = false;
				if (index === 1) {
					this.showModal != this.showModal;
					this.getList();
				}
			},
			joinclub() {
				this.$router.push({
					name: 'ChooseClub'
				});
			},
			DoAddActivity() {
				this.showModal = !this.showModal;
			}
		}
	};
</script>
<style scoped>
	.user-btn span:nth-child(3) {
	    position: relative;
		left:0
	    /* left: 10px; */
	}
</style>

